<template>
  <div class="home">
    <ul class="box-ul">
      <router-link to="/home/meage"><li>首页</li></router-link>
      <router-link to="/home/foods"><li>美食</li></router-link>
      <router-link to="/home/kitchen"><li>餐厨</li></router-link>
      <router-link to=""><li>艺术</li></router-link>
      <router-link to=""><li>电器</li></router-link>
      <router-link to=""><li>居家</li></router-link>
      <router-link to=""><li>洗护</li></router-link>
      <router-link to=""><li>孕婴</li></router-link>
      <router-link to=""><li>服装</li></router-link>
      <router-link to=""><li>杂货</li></router-link>
      <li><input type="text"></li>
    </ul>
    <div class="bottom">
      <dl>
        <dd>
          <img src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/img/category%20(4).png" alt="">
          <p>话上</p>
        </dd>
        <dd>
          <img src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/img/category%20(4).png" alt="">
          <p>话上</p>
        </dd>
        <dd>
          <img src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/img/category%20(4).png" alt="">
          <p>话上</p>
        </dd>
        <dd>
          <img src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/img/category%20(4).png" alt="">
          <p>话上</p>
        </dd>
        <dd>
          <img src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/img/category%20(4).png" alt="">
          <p>话上</p>
        </dd>
        <dd>
          <img src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/img/category%20(4).png" alt="">
          <p>话上</p>
        </dd>
        <dd>
          <img src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/img/category%20(4).png" alt="">
          <p>话上</p>
        </dd>
        <dd>
          <img src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/img/category%20(4).png" alt="">
          <p>话上</p>
        </dd>
        <dd>
          <img src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/img/category%20(4).png" alt="">
          <p>话上</p>
        </dd>
        <dd>
          <img src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/img/category%20(4).png" alt="">
          <p>话上</p>
        </dd>
      </dl>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "HomeView",
  
  methods:{
    
  }
};
</script>
<style scoped>
*{
  margin: 0;
  padding: 0;
}
  /* .home {
    height:1500px;
    width:100vw;
  } */
  ul,li{
    list-style: none;
  }
  .box-ul{
    position:sticky;
	  top:0px;
    display: flex;
    width: 90vw;
    border:1px solid #aaa;
    height:150px;
    margin:0 auto;
    box-sizing:border-box;
    z-index:999;
    background-color:#fff;
    padding-left:190px;
  }
  .box-ul li{
    line-height:150px;
    font-size:16px;
    color: #000;
    padding-right: 30px;
  }
  .box-ul:hover +.bottom {
    display:block;
    animation:all 1s;
  }
  /* 二级菜单 */
  .bottom {
    width:90vw;
    height:100px;
    margin:0 auto;
    text-align:center;
    position:absolute;
    top:120px;
    left:98px;
    z-index:1000;
    background-color:#fff;
    display:none;
  }
  .bottom dl {
    display:flex;
    padding:0 30px;
    box-shadow: 0 2px 16px #ccc, 0 0 1px #ccc, 0 0 1px #ccc; 
  }
  .bottom dd img {
    width:80px;
    height:70px;
    margin:0 20px;
  }
</style>
